<template>
<div>
    <div class="headerTop">
      <router-link to="Footerone">
        <img class="jia" src="https://image.hongbeibang.com/FoTuxKG5pqYKuAsT8BjrflkAxEpj?48X48&imageView2/1/w/48/h/48" alt="">
  </router-link>
    <router-link to="Search">
      <input class="search" type="text" value="搜索食谱/食材，烘焙/家常菜">
    </router-link>
    <img class="iconsearch" src="https://image.hongbeibang.com/FltPAS-35CZfvSpnHacXWoqcfFz5?42X42&imageView2/1/w/42/h/42" alt="">
    <img class="ling" src="https://image.hongbeibang.com/FjmYGE5z6RvQL-_fdLKuSGYfmwO2?48X48&imageView2/1/w/48/h/48" alt="">
  </div>
  <div id="nav">
    <div class="nav-t">
        热门搜索
    </div>
    <div class="nav-list">
        <div>🔥杯子蛋糕</div>
        <div>🔥曲奇</div>
        <div>🔥溶豆</div>
        <div>🔥火腿肠</div>
        <div>太妃糖</div>
        <div>肉松小贝</div>
        <div>🔥蛋糕卷</div>
        <div>巧克力</div>
        <div>吐司</div>
        <div>奶油蛋糕</div>
        <div>古早味蛋糕</div>
        <div>蛋卷</div>
        <div>🔥蛋黄酥</div>
        <div>卤菜</div>
        <div>软欧包</div>
        <div>全麦吐司</div>
        <div>雪花酥</div>
        <div>软糖</div>
        <div>马卡龙</div>
        <div>戚风蛋糕</div>
        <div>丹香蛋糕</div>
        <div>🔥小天使</div>
    </div>
  </div>
</div>
</template>

<script>
export default {
 data () {
return {
}
 },
 mounted () {
}
}
</script>

<style lang="scss" scoped>
ul,ol,li{
  list-style:none;
}
.headerTop{
  width: 100%;
  height: 44px;
  background-color: #fff;
  // position: relative;
  position: fixed;
  z-index: 999;
  top: 0;
  .jia{
    width: 27px;
    height: 27px;
    margin-top: 9px;
    margin-left: 10px;
  }
  .jia,.search,.ling{
    vertical-align: middle;
  }
  .search{
    width: 65%;
    height: 25px;
    margin-left:35px;
    margin-top: 6px;
    color: #999;
    border-radius:12px;
    text-align: center;
  }
  .ling{
    width: 27px;
    height: 27px;
    margin-top: 9px;
    margin-left: 17px;
  }
  .iconsearch{
    position: absolute;
    width: 20px;
    height: 20px;
    top: 12px;
    left: 100px;
  }
}
#nav{
  width: 100%;
  height: 400px;
  background:#fff;
  padding-top: 42px;
  .nav-t{
    width: 99%;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    color: #999999;
    overflow: hidden;
    zoom: 1;
    margin-left: 10px;
  }
  .nav-list{
    width: 100%;
    height: 250px;
    // background: cornsilk;
    margin-top:15px;
    padding: 3px;
    div{
      max-width: 100%;
      height: 32px;
      line-height: 32px;
      font-size: 16px;
      padding: 0 10px;
      text-align: center;
      margin-right: 10px;
      margin-bottom: 10px;
      border-radius: 100px;
      box-sizing: border-box;
      color: #4A4945;
      background-color: #F5F7F9;
      cursor: pointer;
      zoom: 1;
      display: inline-block;
      vertical-align: middle;
      overflow: hidden;
      text-overflow: ellipsis;
      -otext-overflow: ellipsis;
      -webkit-text-overflow: ellipsis;
      -moz-text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
